document.write('<link rel="stylesheet" href="../css/header.css">')

function getLocalUser() {//获取本地用户信息
    return localStorage.localUser ? JSON.parse(localStorage.localUser) : ''
}

function getParamFromUrlByName(name) {
    return new URL(location.href).searchParams.get(name);
}


Vue.component('common-header', {
    data: function () {
        return {
            hdTopMenuArr: [
                {id: 0, name: '首页'},
                {id: 1, name: '食谱'},
                {id: 2, name: '视频'},
                {id: 3, name: '资讯'},
            ],
            wd: '',
            isLogin: false,
            user: getLocalUser(),
            currentIndex: 0
        }
    },
    methods: {
        hdNavHandleSelect(key, keyPath) {
            if (key == 0) {
                location.href = "/";
            } else {
                location.href = "/contentList.html?type=" + key;
            }
        },
        logout() {
            if (confirm("您确认退出登录吗?")) {
                axios.get("/api/user/logout").then(function () {
                    localStorage.clear();
                    location.href = "/login.html";
                })

            }
        },
        search() {
            location.href = "/contentList.html?wd=" + this.wd;
        }
    },
    created: function () {
        console.log("user=" + localStorage.localUser);
        this.isLogin = localStorage.localUser != null;
        let type = getParamFromUrlByName("type");
        this.currentIndex = type == null ? 0 : parseInt(type);
        console.log(this.currentIndex);
    },
    template: `
    <el-header height="80px" >
    <div  class="center">
        <!--主导航栏开始-->
        <el-row  gutter="20">
            <!--图标开始-->
            <el-col span="6">
                <img src="imgs/icon/icon01.png" @click="location.href='index.html'" alt="icon.png"
                     style="width:196px;height: 65px;cursor: pointer;">
            </el-col>
            <!--图标结束-->

            <!--导航开始-->
            <el-col span="10">
                <el-menu :default-active="currentIndex" class="el-menu-demo"
                         mode="horizontal"
                         @select="hdNavHandleSelect"
                         active-text-color="orange">
                    <el-menu-item :index="i" v-for="(item,i) in hdTopMenuArr">
                        {{item.name}}
                    </el-menu-item>
                  
                </el-menu>
                 
            </el-col>
            <el-col span="6">
            <el-input style="margin: 15px 0;"
             @keydown.native.enter="search()" v-model="wd"
                    placeholder="请输入要搜索的内容"
                    v-model="wd">
                    <el-button slot="append" @click="search()" icon="el-icon-search"></el-button>
          </el-input>
</el-col>
            <!--导航结束-->

            <!--登录注册图标开始-->
            <el-col span="2">
                <el-popover v-if="!isLogin"  title="欢迎来到烘焙网!"   trigger="hover" >
                    <el-row>
                        <el-col span="12">
                            <el-button class="scale" type="info" @click="location.href='reg.html'">注册</el-button>
                        </el-col>
                        <el-col span="12">
                            <el-button class="scale" style="background-color: orange"  @click="location.href='login.html'">登录
                            </el-button>
                        </el-col>
                    </el-row>
 
                    <div slot="reference">
                        <i class="el-icon-user scale" style="font-size: 30px;line-height: 70px"></i>
                    </div>
                </el-popover>
               <el-popover style="text-align: center;text-decoration: none" v-else  title="欢迎来到烘焙网!"   trigger="hover" >
                     
                    <div slot="reference">
                        <i class="el-icon-user scale" style="font-size: 30px;line-height: 70px"></i>
                    </div>
                    <div style="text-align: center">
                    <a class="pop-a" href="/personal.html">
                      <img  :src="user.imgUrl" style="width: 50px;height: 50px;border-radius: 50px;background-color: #666" alt="">
                    </a>
                    <hr>
                    <a class="pop-a" href="/personal.html">个人中心</a>
                    <a class="pop-a" href="javascript:void(0)" @click="logout">退出登录</a>
                    <p v-if="user.isAdmin==1">
                        <a class="pop-a" href="/admin.html">网站后台</a>
                    </p>
</div>
                  
                </el-popover>

            </el-col>
            <!--登录注册图标结束-->
        </el-row>
        <!--主导航栏结束-->
</div>
    
    </el-header>
    `
})


Vue.component('common-footer', {
    data: function () {
        return {
            ftTopItems: [
                [
                    {text: '关于我们', url: 'javascript:void(0)'},
                    {text: '烘焙学院', url: 'javascript:void(0)'},
                    {text: '烘焙食谱', url: 'javascript:void(0)'},
                    {text: '分类信息', url: 'javascript:void(0)'},
                    {text: '求职招聘', url: 'javascript:void(0)'},
                    {text: '社区交流', url: 'javascript:void(0)'}],
                [
                    {text: '联系我们', url: 'javascript:void(0)'},
                    {text: '广告投放', url: 'javascript:void(0)'},
                    {text: '用户协议', url: 'javascript:void(0)'},
                    {text: '友情链接', url: 'javascript:void(0)'},
                    {text: '在线反馈', url: 'javascript:void(0)'},
                    {text: '我发投稿', url: 'javascript:void(0)'}],
                [
                    {text: 'Archiver', url: ''},
                    {text: '手机版', url: ''},
                    {text: '小黑屋', url: ''}]
            ]
        }
    },

    template: `
        <el-footer height="280px" style="background:#2f3234;padding: 30px 0">
        <!--footer开始-->
            <div style="width: 1200px;margin: 30px auto;text-align: center">
                <el-row   >
                    <el-col span="5" style="color: #666;text-align: center">
                            <img src="imgs/icon/icon01.png" alt="iconImg" class="scale">
                            <p>教程灵感就看烘焙坊</p>
                            <p>烘焙行业网络社区平台</p>
                            <p>全国百城上千个职位等你来</p>
                    </el-col>

                    <el-col span="2" offset="4">
                        <h3>关于我们</h3>
                        <div v-for="item in ftTopItems[0]">
                            <a class="scale" :href="item.url">
                                {{item.text}}
                            </a>
                        </div>
                    </el-col>
                    <el-col span="2" style="height: 100%">
                        <h3>支持与服务</h3>
                        <div v-for="item in ftTopItems[1]">
                            <a class="scale" :href="item.url">
                                {{item.text}}
                            </a>
                        </div>

                    </el-col>
                    <el-col span="2" style="height: 100%">
                        <h3>底部导航</h3>
                        <div v-for="item in ftTopItems[2]">
                        <a
                           class="scale" :href="item.url">
                            {{item.text}}
                        </a>
                        </div>
                    </el-col>

                    <el-col span="4" offset="3">
                        <el-row style="margin: 15px auto">

                        </el-row>
                        <div style="margin: 0 auto;width: fit-content">
                            <span style="font-size: 54px;color: orange">烘焙</span>
                            <span style="font-size: 54px;color: #676b6f;font-style: normal">馆</span>
                            <p style="color: #666">烘焙行业网络社区平台</p>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="center">
                <p style="color: #aaa;text-align: center;font-size: 14px;line-height: 30px;margin: 0 auto">
                    Copyright ©2018-2023 烘焙坊Powered by©TEDU!技术支持：烘焙坊
                </p>
            </div>
        <!--footer结束-->
    </el-footer>
    `
})


